<template>
  <div>
    <div class="type-nav">
            <div class="container">
                <div  @mouseenter="moveInDiv" @mouseleave="moveOutDiv">
                    <h2 class="all">全部商品分类</h2>
                    <transition name="sort">
                      <div class="sort" @click="toSearch" v-show="isShow" >
                          <div class="all-sort-list2" >
                              <div class="item " :class="{'turn_on':index === currentIndex}" @mouseenter="moveInItem(index)"
                              v-for="(c1,index) in categoryList" :key="c1.categoryId">
                                  <h3>
                                      <a href="javascript:;" :data-category1-id="c1.categoryId" :data-category-name="c1.categoryName">{{c1.categoryName}}</a>
                                  </h3>
                                  <div class="item-list clearfix">
                                      <div class="subitem">
                                          <dl class="fore" v-for="c2 in c1.categoryChild" :key="c2.categoryId">
                                              <dt>
                                                  <a href="javascript:;" :data-category2-id="c2.categoryId" :data-category-name="c2.categoryName">{{c2.categoryName}}</a>
                                              </dt>
                                              <dd>
                                                  <em v-for="c3 in c2.categoryChild" :key="c3.categoryId">
                                                      <a href="javascript:;" :data-category3-id="c3.categoryId" :data-category-name="c3.categoryName">{{c3.categoryName}}</a>
                                                  </em>
                                              </dd>
                                          </dl>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>                   
                    </transition>
                </div>
                <nav class="nav">
                    <a href="###">服装城</a>
                    <a href="###">美妆馆</a>
                    <a href="###">尚品汇超市</a>
                    <a href="###">全球购</a>
                    <a href="###">闪购</a>
                    <a href="###">团购</a>
                    <a href="###">有趣</a>
                    <a href="###">秒杀</a>
                </nav>
            </div>
        </div>
  </div>
</template>

<script>
import throttle from 'lodash/throttle'
export default {
  name: 'TypeNav',
  components: {

  },
  data() {
    return {
        currentIndex :-1,
        //控制一级分类的显示隐藏，默认显示
        isShow:true
    }
  },
  computed: {
    categoryList(){
        return this.$store.state.home.categoryList;
    }
  },
  methods: {
    //进入一级分类事件：触发太频繁，cpu可能处理不过来，增加节流
    //lodash的throttle返回一个有节流的函数
    moveInItem:throttle(function(index){
        this.currentIndex = index;
    },50,{trailing:false}),

    //事件委托+编程式导航+自定义事件
    toSearch(e){
        //console.log(e.target.dataset);
        const {category1Id,category2Id,category3Id,categoryName} = e.target.dataset;
        //判断是不是a元素
        if (categoryName){
            let location = {
                name:'search'
            };
            let query = {};
            if (category1Id) {
                query = {
                    category1Id,
                    categoryName
                }
            }else if (category2Id) {
                query = {
                    category2Id,
                    categoryName
                }
            }else {
                query = {
                    category3Id,
                    categoryName
                }
            }
            location.query = query;
            //合并hearder组件的kw参数
            location.params = this.$route.params;
            if (this.$route.path !== '/home') {
                this.$router.replace(location);
            }else {
                this.$router.push(location);
            }
           
        }
    },

    //鼠标移入包含块事件
    moveInDiv(){
      this.isShow = true;
    },
    //鼠标移出包含块事件
    moveOutDiv(){
      this.currentIndex = -1;
      if (this.$route.path !== '/home'){
        this.isShow =false;
      }
      
    }
  },
  //修复刷新重新加载组件时，列表闪现问题
  beforeMount(){
    //如果不是home页面，就隐藏一级分类
    if (this.$route.path !== '/home') {
      this.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .type-nav {
      border-bottom: 2px solid #e1251b;

      .container {
          width: 1200px;
          margin: 0 auto;
          display: flex;
          position: relative;

          .all {
              width: 210px;
              height: 45px;
              background-color: #e1251b;
              line-height: 45px;
              text-align: center;
              color: #fff;
              font-size: 14px;
              font-weight: bold;
          }

          .nav {
              a {
                  height: 45px;
                  margin: 0 22px;
                  line-height: 45px;
                  font-size: 16px;
                  color: #333;
              }
          }

          .sort {
              position: absolute;
              left: 0;
              top: 45px;
              width: 210px;
              height: 461px;
              position: absolute;
              background: #fafafa;
              z-index: 999;
              //当显示和隐藏，会临时有这6个类
              &.sort-enter {
                height: 0;
              }
              &.sort-enter-to {
                height: 461px;
              }
              &.sort-enter-active {
                overflow: hidden;//让sort这个区域外的都不显示，二三级列表也不会显示
                transition: height 2s;
              }

              .all-sort-list2 {
                  .item {
                      h3 {
                          line-height: 30px;
                          font-size: 14px;
                          font-weight: 400;
                          overflow: hidden;
                          padding: 0 20px;
                          margin: 0;

                          a {
                              color: #333;
                          }
                      }

                      .item-list {
                          display: none;
                          position: absolute;
                          width: 734px;
                          min-height: 460px;
                          background: #f7f7f7;
                          left: 210px;
                          border: 1px solid #ddd;
                          top: 0;
                          z-index: 9999 !important;

                          .subitem {
                              float: left;
                              width: 750px;
                              padding: 0 4px 0 8px;

                              dl {
                                  border-top: 1px solid #eee;
                                  padding: 6px 0;
                                  overflow: hidden;
                                  zoom: 1;

                                  &.fore {
                                      border-top: 0;
                                  }

                                  dt {
                                      float: left;
                                      width: 54px;
                                      line-height: 22px;
                                      text-align: right;
                                      padding: 3px 6px 0 0;
                                      font-weight: 700;
                                  }

                                  dd {
                                      float: left;
                                      width: 615px;
                                      padding: 3px 0 0;
                                      overflow: hidden;

                                      em {
                                          float: left;
                                          height: 14px;
                                          line-height: 14px;
                                          padding: 0 8px;
                                          margin-top: 5px;
                                          border-left: 1px solid #ccc;
                                      }
                                  }
                              }
                          }
                      }

                      &.turn_on {
                            background-color: #e1251b;
                          .item-list {
                              display: block;
                          }
                      }
                  }
              }
          }
      }
  }
</style>